<!-- 写心得 -->
<template>
    <div class="writing">
        <!-- 输入框 -->
        <div class="textarea-box">
            <!-- <div class="textarea-input" contenteditable="true" :placeholder="textareaPla" @input="handleInput($event)" @blur="blurSave()" ref="textarea" @onpaste="onpasteFun($event)"></div> -->
            <textarea class="textarea-input" v-model="textareaCon" @blur="blurSave()" ref="textarea" placeholder="写些什么和大家分享（至少20个字）..."></textarea>
            <div class="textarea-num">{{textareaCon.length}}/1000</div>
        </div>
        <!-- 上传图片 -->
        <!-- 页码 -->
        <div class="write-page">
            <p>请输入起始页结束页（选填）</p>
            <div class="page-box">
                <input class="" type="number" placeholder="起始页码" v-model="startPage"  maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)">
                <span>至</span>
                <input class="" type="number" placeholder="结束页码" v-model="endPage"  maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)">
            </div>
        </div>
        <!-- 按钮 -->
        <div class="btn-box">
            <div class="btn-send shadow2" @click="sendClick()">发布</div>
        </div>
        
    </div>
</template>

<script>
import { imgLoad } from '@/assets/js/base'
import { axGet,axPost } from '@/api/index'
import { setTimeout } from 'timers';

export default {
    name: "writing",
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            bookid:this.$route.query.bookid,
            textareaCon:'',     //输入内容
            textareaPla:'写些什么和大家分享（至少20个字）...',//输入框提示语
            startPage:'',       //开始页
            endPage:'',         //结束页
            canSend:true,
        }
    },
    watch:{
        textareaCon(newVal,oldVal){
            if(newVal.length>1000){  
                this.textareaCon = newVal.slice(0,1000)
            }
        },
    },
    created(){ 
        this.$parent.menuShow=false; 
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }
    },
    mounted(){
    },
    destroyed(){
        this.$parent.scoreShow=false;
    },
    methods:{
        handleInput(event){
            if(event.target.innerText.length>1000){
                event.target.innerText=event.target.innerText.slice(0,1000)
            }
            this.textareaCon = event.target.innerText;
        },
        onpasteFun(e){
            let text=(e.originalEvent || e).clipboardData.getData('text/plain')
            console.log(text)
        },
        blurSave(){
            // localStorage.setItem("textareaCon",this.textareaCon);
        },
        //发送 
        sendClick(){
            let regCon=/^\s+$/g;
            let regSP=/^\d{1,}$/;
            let regEP=/^\d{1,}$/;
            // console.log(regCon.test(this.textareaCon))
            if(this.textareaCon.length==0 || regCon.test(this.textareaCon)){
                this.$LayerTip({
                    content:"请填写要分享的内容",
                    time:1500,
                });
            }else if(this.textareaCon.length<20){
                this.$LayerTip({
                    content:"您分享的内容太少啦",
                    time:1500,
                });
            }else if ((this.startPage && !this.endPage) || (!this.startPage && this.endPage) || (parseInt(this.startPage)>parseInt(this.endPage))) {
                this.$LayerTip({
                    content:"请填写正确的页码",
                    time:1500,
                });
            }else if(this.startPage && !regSP.test(this.startPage)){
                this.$LayerTip({
                    content:"请填写正确的页码",
                    time:1500,
                });
            }else if(this.endPage && !regEP.test(this.endPage)){
                this.$LayerTip({
                    content:"请填写正确的页码",
                    time:1500,
                });
            }else{
                if(this.canSend){
                    this.canSend=false
                    this.sendReview()
                }
                
            }
        },
        //发送请求
        sendReview(){
            let page=''
            if(this.startPage && this.endPage){
                page = 'P' + this.startPage + '至P' + this.endPage
            }
            axPost('PostExperience', {
                userId:this.userid,
                bookid:this.bookid,
                ExperienceContent:this.textareaCon,  //书评
                PictureCollection:'',   //图片
                PageInterval: page,     //页码
            }).then(res => {
                this.canSend=true
                if(res.ResultCode==1 && res.Value){
                    let isPostScore=sessionStorage.getItem("postScore0")
                    if(isPostScore && isPostScore=='true'){
                        this.$LayerTip({
                            content:"发布成功",
                            time:1500,
                        });
                        setTimeout(()=>{
                            this.$router.go(-1)
                        },1500)  
                    }else{
                        this.$parent.postScore(100,0,'发布成功')
                    }
                }else{
                    this.$LayerTip({
                        content:"发布失败，请稍后再试",
                        time:1500,
                    });
                }
            }).catch(res => {
                this.canSend=true
                this.$LayerTip({
                    content:"发布失败",
                    time:1500,
                });
            })
        },
    }
}
</script>
<style type="text/css" scoped>
.writing{
    padding: 0.42rem 0.32rem 1.8rem;
    box-sizing: border-box;
    min-height: 100%;
}
.textarea-input{
    width: 100%;
    min-height: 2.52rem;
    font-size: 0.3rem;
    word-wrap: break-word;
    word-break: break-all;
    /* overflow-y: scroll; */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select:text;
    -khtml-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;/*手机浏览器的用户选择功能 */
}
.textarea-input::-webkit-input-placeholder{
    color: #ccc;
}
.textarea-input::-moz-placeholder{
    color: #ccc;
}
.textarea-input:-moz-placeholder{
    color: #ccc;
}
.textarea-input:-ms-input-placeholder{
    color: #ccc;
}
.textarea-input::-webkit-scrollbar{
    display:none;
}
/* .textarea-input:empty:before{
    content:attr(placeholder);
    color: #ccc;
} */
/* .textarea-input:focus:before{
    content:none;
} */
.textarea-num{
    color: #999;
    text-align: right;
}
.write-page{
    padding-top: 0.66rem;
}
.write-page p{
    font-size: 0.32rem;
    color: #ccc;
}
.page-box{
    display:-webkit-box; 
	display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 0.8rem;
    line-height: 0.8rem;
    padding-top: 0.3rem;
}
.page-box span{
    color: #666;
    font-size: 0.3rem;
}
.page-box input{
    width: 2.96rem;
    height: 0.8rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.32rem;
    border-radius: 0.42rem;
    line-height: 0.8rem;
    padding: 0 0.42rem 0 0.94rem;
    background: #f3f5f7 url(~@/assets/img/icon/page.png) no-repeat 0.34rem center;
    background-size: 0.4rem 0.4rem; 
}
.page-box input::-webkit-input-placeholder{
    color: #ccc;
}
.page-box input::-moz-placeholder{
    color: #ccc;
}
.page-box input:-moz-placeholder{
    color: #ccc;
}
.page-box input:-ms-input-placeholder{
    color: #ccc;
}
.btn-box{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 0.36rem;
    line-height: 0.9rem;
    text-align: center;
    padding:0 0.32rem 0.32rem;
    box-sizing: border-box;
}
.btn-send{
    width: 100%;
    height: 0.9rem;
    background: #02affe;
    color: #fff;
    border-radius: 0.5rem; 
}
</style>